import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Layout, Dropdown, Menu, Icon } from 'antd';
import AppBreadcrumb from './AppBreadcrumb';
import { userAction, permissionsAction } from '@/redux/action';
const { Header } = Layout;
@connect(
  state => state,
  { userAction, permissionsAction }
)
export default class Navbar extends Component {

  handleEsc = () => {
    this.props.userAction({});
    this.props.permissionsAction([])
  }

  handleUp = () => {
    console.log('修改密码')
  }

  menu = (
    <Menu>
      <Menu.Item onClick={this.handleEsc}>
        退出登录
    </Menu.Item>
      <Menu.Item onClick={this.handleUp}>
        修改密码
    </Menu.Item>
    </Menu>
  );
  render () {
    return (
      <Header className="admin-layout-header">
        <div>
          <Icon
            style={{ fontSize: 20 }}
            className="trigger"
            type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'}
            onClick={this.props.toggle}
          />
          <AppBreadcrumb></AppBreadcrumb>
        </div>
        <Dropdown overlay={this.menu}>
          <Icon type="setting" style={{ fontSize: 20 }} />
        </Dropdown>

      </Header>
    );
  }
}
